<template>
  <el-dialog
    :title="$t('提现记录')"
    :visible.sync="showPwdDialog"
    :before-close="handleClose"
    width="30%"
    class="my-dialog__wrapper withraw-dialog-wrap"
  >
    <div class="withraw-dialog-content">
      <div class="withraw-list-wrap">
        <div class="none-box" v-if="list.length == 0">
          {{ $t("暂无数据") }}
        </div>
        <div class="withraw-item" v-for="(item, index) in list" :key="index">
          <div>
            <p>{{ $t("提现") }}</p>
            <p style="font-size: 0.68rem;">{{ formatDate(item.createTime, "YYYY-MM-DD HH-mm-ss") }}</p>
          </div>
          <div>
            <p class="price">
              {{ lang == "zh" ? "¥" : "$" }}{{ item.price / 100 }}
            </p>
            <p>{{ item.statusName }}</p>
          </div>
        </div>
      </div>
      <div class="pagination-box">
        <el-pagination
          background
          :current-page="page.pageNo"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="showPwdDialog = false">{{
        $t("确 定")
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import api from "@/api/personcenter";
import { formatDate } from "@/utils/index.js";
export default {
  data() {
    return {
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      list: [],
      showPwdDialog: false,
      lang: null,
    };
  },

  methods: {
    formatDate(time, format) {
      return formatDate(time, format);
    },
    handleClose(done) {
      this.$confirm(this.$t("确认关闭？"))
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNo = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.getList();
    },
    async getList() {
      let params = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
      };
      let res = await this.$http.get(api.getWithrawList, {
        params,
        headers: {
          lang: this.lang,
        },
      });
      if (res && res.code == 0) {
        this.list = res.data.list;
        this.page.total = res.data.total;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    show(lang) {
      this.lang = lang;
      this.list = [];
      this.showPwdDialog = true;
      this.handleCurrentChange(1);
    },
  },
};
</script>
<style lang="scss">
.withraw-dialog-content {
  padding: 0.5;
  font-size: 0.89rem;
  .pagination-box {
    text-align: center;
  }
  .withraw-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(66, 95, 155, 0.05);
    border-radius: 0.11rem 0.11rem 0.11rem 0.11rem;
    border: 0.06rem solid #dcdfe6;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    .price {
      color: #f85c02;
      font-size: 1.2rem;
    }
  }
}
</style>
